import React from 'react';
import { View, Text, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
import sheet from '../styles/sheet';
import colors from '../styles/colors';

import { ShowMap } from '../examples/ShowMap';
import ShowClick from '../examples/ShowClick';
import SetPitch from '../examples/SetPitch';

const styles = StyleSheet.create({
    exampleBackground: {
        backgroundColor: colors.primary.pinkFaint,
        flex: 1,
    },
    exampleList: {
        flex: 1,
    },
    exampleListItem: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingHorizontal: 16,
        paddingVertical: 32,
    },
    exampleListItemBorder: {
        borderBottomColor: '#ccc',
        borderBottomWidth: StyleSheet.hairlineWidth,
    },
    exampleListLabel: {
        fontSize: 18,
    },
    header: {
        fontSize: 24,
        marginTop: 48,
        textAlign: 'center',
    }
});

function ExampleItem(label, Component) {
    return {
        label: label,
        Component: Component,
        navigationType: 'Demo'
    }
}

function ExampleGroup(label, items) {
    return {
        label: label,
        items: items,
        navigationType: 'Group',
        Component: ({ navigation }) => (
            <ExampleGroupComponent items={items} navigation={navigation} />)
    }
}

const Examples = [
    ExampleGroup('Map', [
        ExampleItem('Show Map', ShowMap),
        ExampleItem('Show Click', ShowClick)
    ]),
    ExampleGroup('Camera', [
        ExampleItem('Set Pitch', SetPitch)
    ])
];

function ExampleGroupComponent({ items, navigation }) {
    function itemPress(item) {
        navigation.navigate(item.navigationType, item);
    }
    function renderItem({ item }) {
        return (
            <View style={styles.exampleListItemBorder}>
                <TouchableOpacity onPress={() => itemPress(item)}>
                    <View style={styles.exampleListItem}>
                        <Text style={styles.exampleListLabel}>{item.label}</Text>
                        <MaterialIcons name="keyboard-arrow-right" size={24} />
                    </View>
                </TouchableOpacity>
            </View>
        );
    }

    return <View style={sheet.matchParent}>
        <View style={sheet.matchParent}>
            <FlatList
                style={styles.exampleList}
                data={items}
                keyExtractor={(item) => item.label}
                renderItem={renderItem}
            />
        </View>
    </View>
}

export default function HomeScreen({ route, navigation }) {
    const items = route?.params?.items || Examples;

    // React.useLayoutEffect(() => {
    //     console.log('navigation##',navigation);
    //     navigation.setOptions({
    //         title: route?.params?.label || "React Native Mapbox GL",
    //         col
    //     });
    // }, [navigation]);

    return <ExampleGroupComponent
        items={items}
        navigation={navigation}
    // showBack={!!items}
    />
}